import React from 'react';
import {App, Button, Card, Descriptions, Flex, Spin} from "antd";
import {Link, useNavigate, useParams} from "react-router-dom";
import {DescriptionsItemType} from "antd/es/descriptions";
import LogFactory from "log/LogFactory";
import {Part} from "type/Part";
import useAsyncEffect from "hooks/useAsyncEffect";

import {useAppDispatch} from "../../../redux/hook";
import {fetchDeletePart} from "../../../redux/reducer/async/partAsyncAction";
import {requestPartById} from "../RequestHandler";

const log = LogFactory.getLog("PartDetailsComponent");

const partInfoToDescriptions = (part: Part): DescriptionsItemType[] => {
    return [
        {
            key: "id" ,
            label: "零件编号",
            children: part.id
        },
        {
            key: "key" ,
            label: "零件识别码",
            children: part.key
        },
        {
            key: "partName",
            label: "零件名称",
            children: part.partName
        },
        {
            key: "partDesc",
            label: "零件描述",
            children: part.partDesc
        },
        {
            key: "figureNumber",
            label: "零件图号",
            children: part.figureNumber
        },
        {
            key: "partProvider",
            label: "零件供应商",
            children: part.partProvider
        },
        {
            key: "partGroup",
            label: "零件组" ,
            children: part.partGroup
        },
        {
            key: "partSize",
            label: "零件尺寸",
            children: part.partSize
        },
        {
            key: "partPicture",
            label: "零件图片",
            children: part.partPicture
        },
        {
            key: "repertorySize",
            label: "库存数量",
            children: part.repertorySize
        },
        {
            key: "costPrice",
            label: "成本价格",
            children: part.costPrice
        },
        {
            key: "salePrice",
            label: "销售价格",
            children: part.salePrice
        },
        {
            key: "createTime",
            label: "创建时间",
            children: part.createTime.toString()
        },
        {
            key: "updateTime",
            label: "更新时间",
            children: part.updateTime.toString()
        },
        {
            key: "order",
            label: "数据排序",
            children: part.order
        },
        {
            key: "remark",
            label: "备注信息",
            children: part.remark
        },
    ] ;
} ;

const PartDetailsComponent = () => {
    const id = useParams().id ;
    const partRef = React.useRef<Part>() ;
    const [loading, setLoading] = React.useState<boolean>(true);
    const [items, setItems] = React.useState<DescriptionsItemType[]>([]) ;
    const dispatch = useAppDispatch() ;
    const {message} = App.useApp() ;
    const navigate = useNavigate() ;

    useAsyncEffect(async () => {
        const res = await requestPartById(id) ;
        if (!res.success){
            log.warn("查询零件信息失败",res) ;
            return ;
        }
        setItems(partInfoToDescriptions(res.data)) ;
    }) ;

    const handleDelete = async () => {
        if (partRef.current === void 0){
            log.warn("删除零件失败,零件信息为空") ;
            return ;
        }
        setLoading(true) ;
        let res = await dispatch(fetchDeletePart(partRef.current.id)).unwrap() ;
        if (res === void 0){
            message.warning("删除零件失败") ;
        }else {
            message.success("删除零件成功") ;
            navigate(-1) ;
        }
        setLoading(false) ;
    } ;
    return (
        <Card title={"零件详细信息"} extra={<Link to={".."}>零件列表</Link>}>
            <Flex style={{
                marginBottom: "8px"
            }}>
                <Button loading={loading} danger={true} type={"primary"} onClick={handleDelete}>删除零件</Button>
            </Flex>
            <Spin spinning={loading}>
                <Descriptions
                    bordered={true}
                    size={"middle"}
                    column={2}
                    items={items}
                >
                </Descriptions>
            </Spin>
        </Card>
    );
};

export default PartDetailsComponent;